<template>
    <div class="page-container page-container-detail-page">
        <!-- 面包屑 -->
        <div class="breadcrumb ">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>营销中心</el-breadcrumb-item>
                <el-breadcrumb-item>红包</el-breadcrumb-item>
                <el-breadcrumb-item>红包详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="page-container-detail">
            <p class="pageName">红包详情</p>
            <el-form  :size="size" ref="filters" class="border" >
                <div class="flex">
                    <el-form-item class="toolbar-model">
                        <span class="color333 font18">活动名称：</span>
                        <span class="color333 font18">{{data.promName}}</span>
                    </el-form-item>
                    <el-form-item class="toolbar-model">
                        <span class="color333 font18">活动ID：</span>
                        <span class="color333 font18">{{data.promotionId}}</span>
                    </el-form-item>
                    <el-form-item class="toolbar-model">
                        <span class="color333 font18">当前状态：</span>
                        <span class="color333 font18" v-if="data.status == 9">活动草稿</span>
                        <span class="color333 font18" v-else-if="statusFormat(data) == 11">待提交</span>
                        <span class="color333 font18" v-else-if="statusFormat(data) == 12">待审核</span>
                        <span class="color333 font18" v-else-if="statusFormat(data) == 13">未开始</span>
                        <span class="color333 font18" v-else-if="statusFormat(data) == 14">审核未通过</span>
                        <span class="color333 font18" v-else-if="statusFormat(data) == 15">进行中</span>
                        <span class="color333 font18" v-else-if="statusFormat(data) == 16">已过期</span>
                        <span class="color333 font18" v-else-if="statusFormat(data) == 17">已结束</span>
                        <span class="color333 font18" v-else-if="data.status == 7">已关闭</span>
                    </el-form-item>
                </div>
            </el-form>
            <!-- 审核按钮 -->
            <el-form :inline="true" :size="size" ref="filters" style="text-align: center;">
                <el-row class="search-button">
                    <kt-button class="searchButton" :size="size" @click="submitReviewShow" v-if="statusFormat(data) == 11 || statusFormat(data) == 14" v-show="data.editFlag" perms="market:coupon:submit" label="提交审核"/>
                    <kt-button class="searchButton" :size="size" @click="reviewShow" v-if="statusFormat(data) == 12" v-show="data.editFlag" perms="market:coupon:verify" label="审核"/>
                    <kt-button class="resetButton" :size="size" @click="saveTemplateDialog" v-show="data.editFlag" perms="market:coupon:addtemp" label="保存为模板"/>
                </el-row>
            </el-form>


            <!-- 促销规则部分tab -->
            <div class="tab-container tab-container-noPadding">
                <el-tabs v-model="active" type="border-card">
                    <el-tab-pane label="促销规则" name="1">
                        <div>
                            <form class="form-horizontal ">
                                <div class="basicInfo">基本信息：</div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >活动名称：</label>
                                    <div class="color333 font16">{{data.promName}}</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >活动日期：</label>
                                    <div class="color333">{{data.startTime}} 至 {{data.endTime}}</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >活动标签：</label>
                                    <div class="color333">{{data.labelName}}</div>
                                </div>


                                <div class="basicInfo">活动规则：</div>
                                <!-- <div class="form-group">
                                    <label class="color333 font16" >红包种类：</label>
                                    <div class="color333" v-if="data.couponType == 0">电子券</div>
                                    <div class="color333" v-else-if="data.couponType == 1">实体券</div>
                                </div> -->
                                <div class="form-group">
                                    <label class="color333 font16" >金额抵扣类型：</label>
                                    <div class="color333" v-if="data.amountDeductType == 0">商品红包</div>
                                    <div class="color333" v-else-if="data.amountDeductType == 1">运费红包</div>
                                </div>
                                <!-- <div class="form-group">
                                    <label class="color333 font16" >优惠方式：</label>
                                    <div class="color333" v-if="data.couponMode == 0">金额券</div>
                                    <div class="color333" v-else-if="data.couponMode == 1">折扣券</div>
                                </div> -->
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >作用限制：</label>
                                    <div class="color333">结算价</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >红包面值：</label>
                                    <div class="color333">{{data.couponAmount}}元</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >发行数量：</label>
                                    <div class="color333" v-if="data.grantTotalNum==null">不限制</div>
                                    <div class="color333" v-else-if="data.grantTotalNum!=null">{{data.grantTotalNum}}张</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16" >使用时间设置：</label>
                                    <div class="color333">{{data.couponUseStartTime}} 至 {{data.couponUseEndTime}}</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >使用条件：</label>
                                    <div class="color333">满 {{data.useTotalAmountLimit}} 元使用</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >领取限制：</label>
                                    <div class="color333" v-if="data.idLimitNum==null ||data.idLimitNum==''">不限制（每ID总共可以领取）</div>
                                    <div class="color333" v-if="data.idLimitNum!=null && data.idLimitNum!==''">{{data.idLimitNum}}张（每ID总共可以领取）</div>
                                    <div class="color333" v-if="data.idLimitDayNum==null ||data.idLimitDayNum==''">不限制（每ID总共可以领取）</div>
                                    <div class="color333" v-if="data.idLimitDayNum!=null && data.idLimitDayNum!==''">{{data.idLimitDayNum}}张（每ID每日可以领取）</div>
                                </div>
                                <div class="form-group pdl32 flexBox">
                                    <label class="color333 font16 titleText" >活动描述：</label>
                                    <div class="color333"> {{data.chineseDesc}}</div>
                                </div>

                                <div class="basicInfo">交易规则：</div>
                                <div class="form-group" v-if="deptType != 3">
                                    <div class="color333 font16 ml32">是否分摊：</div>
                                    <div class="color333">
                                        <span v-if="data.costAllocationFlag == 1">是</span>
                                        <span v-if="data.costAllocationFlag == 2">否</span>
                                    </div>
                                </div>
                                <div class="form-group"  v-if="data.costAllocationFlag == 1 && deptType != 3">
                                    <label class="color333 font16 ml32">分摊比例：</label>
                                    <div class="color333" v-if="data.parentAllocationScale != 0 && data.parentAllocationScale != ''">
                                        <span>母平台比例：</span>
                                        <span>{{data.parentAllocationScale}}%&nbsp;</span>
                                    </div>
                                    <div class="color333" v-if="data.childAllocationScale != 0 && data.childAllocationScale != ''">
                                        <span>子平台比例：</span>
                                        <span>{{data.childAllocationScale}}%&nbsp;</span>
                                    </div>
                                    <div class="color333" v-if="data.merchantAllocationScale != 0 && data.merchantAllocationScale != ''">
                                        <span>商家比例：</span>
                                        <span>{{data.merchantAllocationScale}}%&nbsp;</span>
                                    </div>
                                    <div class="color333" v-if="data.storeAllocationScale!= 0 && data.storeAllocationScale != ''">
                                        <span>店铺比例：</span>
                                        <span>{{data.storeAllocationScale}}%</span>
                                    </div>
                                </div>

                                <div class="basicInfo">参与条件：</div>
                                <div class="form-group flexBox" v-if="deptType == 0">
                                    <label class="color333 font16 ml32 titleText" >使用渠道：</label>
                                    <div class="color333 t_l" >
                                        <span v-for="(item, index) in data.channelCodes" :key="index">{{getChannelName(item)}}&nbsp;</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32">新老用户：</label>
                                    <div class="color333">
                                    <span v-for="item in (data.proUserType + '').split(',')" :key="item" class="ng-binding ng-scope">
                                        <span v-if="item == 1">
                                        新用户 &nbsp;  
                                        </span>
                                        <span v-if="item == 2">
                                        老用户 &nbsp;  
                                        </span>
                                    </span>
                                    </div>
                                </div>
                                <div class="form-group" v-if="data.memTypes != null">
                                    <label class="color333 font16 ml32">会员类型：</label>
                                    <div class="color333">
                                    <span
                                        v-for="item in (data.memTypes + '').split(
                                        ','
                                        )"
                                        :key="item"
                                        class="ng-binding ng-scope"
                                    >
                                        <span v-if="item == 1">
                                        普通会员 &nbsp;
                                        </span>
                                        <span v-if="item == 2">
                                        VIP会员 &nbsp;
                                        </span>
                                    </span>
                                    <!-- <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">普通会员 &nbsp;</span> -->
                                    </div>
                                </div>
                                <div class="oh mb20">
                                    <span class="color333 font16 ml32 turnInlineBlock w80  mb20">会员等级：</span>
                                    <div class="color333">
                                    <div style="border:1px solid #ededed" class="ml33 pdl30 pdt20">
                                    <div
                                        v-for="item in levelList "
                                        :key="item"
                                        class=" mb10 lh25"
                                    >
                                        <div  style="display:flex">
                                            <span class="turnInlineBlock w144 oe t_r " style="flex-shrink:0">{{item.childName}}</span>
                                            <span class="turnInlineBlock">：</span>
                          <span class="turnInlineBlock ">
                            <span v-for="(level,index) in item.childLevelList.split('|')" :key="index"  class="turnInlineBlock width120 mr10 mb10" >
                               <img src="../../../../src/assets/checked.png" alt="" style="width:16px;height:16px" class="mr10">
                               {{level}}
                               <!-- <span class="turnInlineBlock" style="margin-left:5px; margin-right:5px">
                                 {{(item.childLevelList.split("|").length-1) > index ? '|' : ""}}
                               </span> -->
                            </span>
                           </span>
                                        </div>
                                    </div>
                                    </div>
                                    <!-- <span ng-repeat="channel in promotionDetailContent.channelCodes" class="ng-binding ng-scope">BBC &nbsp;</span> -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >店铺地区：</label>
                                    <div class="color333">全国</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml32" >用户地区：</label>
                                    <div class="color333">全国</div>
                                </div>
                                <div class="form-group">
                                    <label class="color333 font16 ml64" >备注：</label>
                                    <div class="color333">{{data.remark}}</div>
                                </div>
                            </form>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="参与商家/店铺" name="2" class="text-center">
                        <el-tabs v-model="activeShop" type="border-card">
                        <el-tab-pane label="商家" name="1">
                            <merchantTemplate @findMerchantPage="findMerchantPage" ref="merchantTemplate"></merchantTemplate>
                        </el-tab-pane>
                        <el-tab-pane label="店铺" name="2">
                            <storeTemplate @findStorePage="findStorePage" ref="storeTemplate"></storeTemplate>
                        </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>

                    <!-- 参与商品 -->
                    <el-tab-pane label="参与商品" name="4" class="text-center">
                        <el-tabs v-model="productStatusTabs">
                            <el-tab-pane :label="noMutexProductLabel" name="1">
                                <productTemplate @findProductPage="findProductPage" :promType="'2'" ref="productTemplate"></productTemplate>
                            </el-tab-pane>
                            <el-tab-pane :label="mutexProductLabel" name="2">
                                <div>
                                    <el-table :data="mutexProductList"  row-key="goodsId" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" @selection-change="handleSelectionChange" class="tableStyle">
                                       <el-table-column type="selection" width="55"></el-table-column>
                                        <el-table-column prop="goodsId" label="商品ID" sortable align="left"></el-table-column>
                                        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
                                        <el-table-column prop="goodsType" label="商品分类" align="center"></el-table-column>
                                        <el-table-column prop="reserveNum" label="库存" align="center"></el-table-column>
                                        <el-table-column prop="storeName" label="所属店铺"></el-table-column>
                                        <el-table-column prop="price" label="原价（元）" align="center"></el-table-column>
                                        <el-table-column align="center" fixed="right" label="操作" width="400">
                                            <template slot-scope="scope">
                                            <el-button @click="getMutexInfo(scope.row)" v-if="scope.row.spuId != '0'" type="text" class="textButton" size="small">查看详情</el-button>
                                            <el-button @click="renewAdd(scope.row)" type="text" class="textButton" size="small">重新添加</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="toolbar t_r" >
                                        <el-pagination
                                        @size-change="handleSizeChangeMutexProductList"
                                        @current-change="handleCurrentChangeMutexProductList"
                                        :current-page="mutexProductForm.start"
                                        :page-sizes="[10, 20, 30, 40]"
                                        :page-size="mutexProductForm.limit"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="mutexProductTotal"
                                        >
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div>
            <el-dialog
                class="el-dialog-style"
                title="提交审核"
                :visible.sync="submitReviewVisible"
                >
                <p class="t_c">确认提交审核?</p>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" plain @click="submitReviewVisible = false" :size="size" class="cancelButtton">取 消</el-button>
                    <el-button type="primary" @click="submitReview" :size="size" class="searchButton">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div>
            <el-dialog class="el-dialog-style" title="审核" :visible.sync="reviewVisible" :close-on-click-modal="false">
                <el-form :model="form" ref="form" :rules="formRules">
                    <el-form-item class="textarea" prop="checkRemark">
                    <el-input
                        clearable
                        v-model="form.checkRemark"
                        autocomplete="off"
                        placeholder="请输入审核意见"
                        type="textarea"
                        rows="6"
                    ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" plain @click="fail" :size="size" class="cancelButton">不通过</el-button>
                    <el-button type="primary" @click="success" :size="size" class="searchButton">通过</el-button>
                </span>
            </el-dialog>

            <!-- 模板弹窗 -->
            <el-dialog class='el-dialog-style' title="添加模板" :visible.sync="templateDialogFormVisible" :close-on-click-modal="false" @close="cancel()">
                <el-form :model="templateForm"  :rules="templateFormRules" ref="templateForm" label-width="130px">
                    <el-form-item label="模板名称：" prop="templateName" required>
                    <el-input v-model="templateForm.templateName" placeholder="输入模板名称" size="mini" clearable maxlength="60"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" plain @click="cancel()" size="mini" class="cancelButtton">取消</el-button>
                    <el-button type="primary" @click="saveTemplate()" size="mini" class="searchButton">确定</el-button>
                </div>
            </el-dialog>

             <!-- 互斥活动详情 -->
            <el-dialog :visible.sync="mutexPromotionVisible" title="互斥活动详情" width="70%">
            <div>
                <el-table :data="mutexPromotionList" ref="multipleTable" :row-class-name="tableRowClassName"  :size="size">
                <el-table-column prop="promotionId" width="280" label="互斥活动编码" sortable align="center"></el-table-column>
                <el-table-column prop="promName"  width="150" label="互斥活动名称" align="center">
                    <template slot-scope="scope">
                        <el-button @click="linkInfoByMutexProduct(scope.row.promotionId)" type="text" class="textButton" size="small">{{scope.row.promName}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="goodsCategory"  width="350" label="互斥活动时间" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="storeName" label="活动状态" align="center">
                    <template slot-scope="scope">
                    <span class="color333 font18" v-if="scope.row.status == 0">待提交</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 1">待提交</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 2">待审核</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 3">未开始</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 4">审核不通过</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 5">进行中</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 6">已过期</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 7">已关闭</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 8">已结束</span>
                    <span class="color333 font18" v-else-if="scope.row.status == 9">活动草稿</span>
                    </template>
                </el-table-column>
                <el-table-column prop="creatorName" label="创建人" align="center"></el-table-column>
                <el-table-column prop="deptName"  label="创建组织" align="center"></el-table-column>
                </el-table>
                <!--分页栏-->
                <div class="toolbar t_r">
                <el-pagination
                    @size-change="mutexPromotionListSizeChange"
                    @current-change="mutexPromotionListCurrentChange"
                    :current-page="mutexPromotionForm.start"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="mutexPromotionForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="mutexPromotionListTotal"
                ></el-pagination>
                </div>
            </div>
            <div slot="footer" class="dialog-footer t_c">
                <el-button type="primary" plain :size="size" @click.native="mutexPromotionVisible = false" class="searchButton">关闭</el-button>
            </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import merchantTemplate from '@/views/Pages/PromotionManagement/components/PromotionMerchantTemplate'
import storeTemplate from '@/views/Pages/PromotionManagement/components/PromotionStoreTemplate'
import productTemplate from '@/views/Pages/PromotionManagement/components/CouponProductTemplate'
import KtButton from "@/views/Core/KtButton";

export default {
    components:{
        merchantTemplate,
        storeTemplate,
        productTemplate,
        KtButton
    },
    data(){
        return{
            templateDialogFormVisible:false,//模板弹窗
            templateForm:{
                templateName:""
            },//模板model
            templateFormRules:{
                templateName:[
                    { required: true, message: "请输入模板名称", trigger: "blur" },
                    { required: true, message: "请输入模板名称", trigger: "change" },
                    { max: 60, message: "模板名称最多60字符", trigger: "blur" },
                    { max: 60, message: "模板名称最多60字符", trigger: "change" }
                ]
            },
            promotionId:this.$route.query.promotionId,
            size:"small",
            active:"1",
            activeShop:"1",
            data:{},
            submitReviewVisible: false, //提交审核弹窗
            reviewVisible: false,//审核弹窗
            // auditRemark:null,//审核意见
            skillTimeId:"",
            responseInfoList:[],
            productList:[],
            channelList:[{childName:"卡奥斯运营平台",id:"179"}],
            deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型

            productStatusTabs: "1",
            noMutexProductLabel:"生效商品（0）",
            mutexProductForm:{
                promotionId: this.$route.params.id,
                mutexFlag:1,//互斥标识
                start: 1,
                limit: 10
            },
            mutexProductList:[],
            mutexProductTotal:0,
            mutexProductLabel:"互斥商品（0）",
            mutexPromotionForm:{
                promotionId: this.$route.params.id,
                start:1,
                limit:10,
            },
            mutexPromotionList:[],
            mutexPromotionListTotal:0,
            mutexPromotionVisible:false,
            levelList: [],

            form:{
                checkRemark:"",
            },
            formRules:{
                checkRemark: [
                    { required: true, message: "审核意见不能为空", trigger: "blur" }
                ]
            }
        }
    },
    methods:{
    getLevelList(channelCodes){
      if(this.deptType == 0){
        //母平台
        channelCodes.forEach(item=>{
          let name = this.getChannelCodes(item);
          //获取等级
          this.data.promotionMemberGradeList.forEach(levelList=>{
            if(levelList.platformId == item){
                if(levelList.levelCodeList == null || levelList.levelCodeList.length < 1){
                  this.levelList.push({"childName":name,"childLevelList":"全部"})
                }else{
                  this.utils.request.queryMemLevelListByIds({ids:levelList.levelCodeList},res=>{
                      let levelRstList = []
                      res.data.forEach(level=>{
                        levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName);
                      })
                      if(item == '179'){
                        this.levelList.unshift({"childName":name,"childLevelList":levelRstList.join("|")})
                      }else{
                        this.levelList.push({"childName":name,"childLevelList":levelRstList.join("|")})
                      }
                  })
                }
            }
          })
        })
      }else{
        let user = localStorage.getItem("user");
        let userInfo = JSON.parse(user);
        if (this.data.promotionMemberGradeList == null || this.data.promotionMemberGradeList.length < 1 || this.data.promotionMemberGradeList[0].levelCodeList == null){
          this.levelList.push({"childName":userInfo.deptName,"childLevelList":"全部"})
        }else {
          this.utils.request.queryMemLevelListByIds({ids:this.data.promotionMemberGradeList[0].levelCodeList},res=>{
            let levelRstList = []
            res.data.forEach(level=>{
              levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName);
            })
            this.levelList.push({"childName":userInfo.deptName,"childLevelList":levelRstList.join("|")})
          })
        }
      }
    },
    getChannelCodes(code) {
      let item = this.channelList.find(function(item, index) {
        return item.id == code;
      });
      return typeof item == "undefined" ? "" : item.childName;
    },
    saveTemplateDialog(){
      if (this.$refs['templateForm'] != undefined) {
        this.$refs['templateForm'].resetFields();
      }
      this.templateDialogFormVisible = true;
    },
        //table的双色条纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
           /**
     * 状态格式化
     */
    statusFormat(row){
      if(row.status == 1 && new Date().getTime() <= new Date(row.startTime).getTime()){
        //待提交
          return 11;
      }else if(row.status == 2 && new Date().getTime() <= new Date(row.startTime).getTime()){
        //待审核
        return 12;
      }else if(row.status == 11 && new Date().getTime() <= new Date(row.startTime).getTime()){
        //未开始
        return 13;
      }else if(row.status == 4 && new Date().getTime() <= new Date(row.startTime).getTime()){
        //审核未通过
        return 14;
      }else if(row.status == 11 && new Date().getTime() >= new Date(row.startTime).getTime() && new Date().getTime() <= new Date(row.endTime).getTime()){
        //进行中
        return 15;
      }else if((row.status == 1 || row.status ==  2 || row.status == 4) && new Date().getTime() > new Date(row.startTime).getTime()){
        //已过期
        return 16;
      }else if(row.status == 11 && new Date().getTime() > new Date(row.endTime).getTime()){
        //已结束
        return 17;
      }
    },
        /**
         * 保存模板
         */
        saveTemplate(){

            var that = this;
            this.templateForm.promotionId = this.promotionId;
            this.$refs.templateForm.validate(valid => {
                if(valid){
                    this.utils.request.couponSaveTemplate({promotionId:this.promotionId,templateName:this.templateForm.templateName,type:12},res=>{
                        if(res.code == '0000'){
                            this.$message({message:"保存成功",type:"success"});
                            this.templateDialogFormVisible = false;
                        }else{
                            this.$message({message:res.msg,type:"error"})
                        }
                    })
                }
            })


        },
        /**
         * 审核弹
         */
        reviewShow(){
            this.reviewVisible = true;
        },
        /**
         * 通过审核
         */
        success(){

            this.utils.request.couponCheckCoupon({promotionId:this.promotionId,updateStatus:11},res=>{
                this.$message({message:"审核成功",type:"success"});
                // this.$set(this.data,"status",3);
                this.reviewVisible = false;
                this.findInfo();
            })
        },
        /**
         * 不通过
         */
        fail(){
            this.$refs.form.validate(auditRemarkE => {
              if (auditRemarkE) {
                this.utils.request.couponCheckCoupon({promotionId:this.promotionId,updateStatus:4,checkRemark:this.form.checkRemark},res=>{
                    this.$message({message:"审核成功",type:"success"});
                    // this.$set(this.data,"status",4);
                    this.reviewVisible = false;
                    this.findInfo();
                })
              }
            })
        },
        /**
         * 提交审核
         */
        submitReview(){
            this.utils.request.couponCheckCoupon({promotionId:this.promotionId,updateStatus:2},res=>{
                if(res.code == '0000' && res.data){
                    this.$message({message:"提交审核成功",type:"success"});
                    // this.$set(this.data,"status",2);
                    this.submitReviewVisible = false;
                    this.findInfo();
                }else{
                    this.$message({message: res.msg || "提交审核失败",type:"error"});
                    this.submitReviewVisible = false;
                }

            })
        },
        /**
         * 提交审核弹窗
         */
        submitReviewShow(){
            this.submitReviewVisible = true;
        },
        /**
         * 查询绑定的商家数据
         * 分页 参数 data.start data.limit
         * */
        findMerchantPage(data){
            //TDOD
            // this.utils.request.

            //回调子组件方法 渲染表格
            //返回的数据 res.rows res.total
            let that = this;
            data.promotionId = this.promotionId;
            this.utils.request.couponQueryMerchant(data,res=>{
                if(res.code == '0000'){
                    if(res.data && res.data.merchantInfoList && res.data.merchantInfoList.length >0){
                        that.$refs.merchantTemplate.renderMerchantTable({rows:res.data.merchantInfoList,total:res.data.merchantInfoList.length});
                    }else{
                        that.$refs.merchantTemplate.renderMerchantTable({rows:[],total:0});
                    }
                }else{
                    this.$message({message:res.msg || "获取活动商家信息失败",type:"error"});
                }

            });
        },
        /**
         * 查询绑定的店铺数据
         * 分页 参数 data.start data.limit
         * */
        findStorePage(data){
            //TDOD
            // this.utils.request.

            //回调子组件方法 渲染表格
            //返回的数据 res.rows res.total
            let that = this;
            data.promotionId = this.promotionId;
            this.utils.request.couponQueryStore(data,res=>{
                if(res.code == '0000'){
                    if(res.data && res.data.storeInfoList && res.data.storeInfoList.length > 0){
                        that.$refs.storeTemplate.renderStoreTable({rows:res.data.storeInfoList,total:res.data.storeInfoList.length});
                    }else{
                        that.$refs.storeTemplate.renderStoreTable({rows:[],total:0});
                    }
                }else{
                    this.$message({message:res.msg || "获取活动店铺信息失败",type:"error"});
                }
            })
        },
        /**
         * 查询绑定的商品数据
         * 分页 参数 data.start data.limit
         * */
        findProductPage(data){
            //TDOD
            // this.utils.request.

            //回调子组件方法 渲染表格
            //返回的数据 res.rows res.total
            this.utils.request.queryRedGoodsByPromotionId({promotionId: this.promotionId},res=>{
                this.$refs.productTemplate.renderProductTable({rows:res.data.goodsInfoList,total:res.data.goodsInfoList.length});
                if(res.data.skuTotal>9999){
                    this.noMutexProductLabel = "生效商品（9999+）";
                }else{
                    this.noMutexProductLabel = "生效商品（"+res.data.skuTotal+"）";
                }
            })
        },
        findInfo(){
            this.utils.request.couponQueryConfigByPromotionId({"promotionId":this.promotionId},res=>{

                this.data = res.data;
                if(res.data.channelCodes != null){
                    if(res.data.channelCodes.indexOf("179") == -1){
                        res.data.channelCodes.unshift("179");
                    }
                    this.getLevelList(res.data.channelCodes);
                }
            })
        },
        getChannelName(id){
            let item = this.channelList.find(function (item, index) {
                return item.id == id
            })
            return typeof(item)=="undefined" ? "" : item.childName;
        },
        /**
         * 查询互斥商品
         */
        getMutexProductList() {
            var this_ = this;
            this.mutexProductForm.promotionId = this.promotionId;
            this.utils.request.queryRedGoodsByPromotionId(this.mutexProductForm, res => {
                if (res.code == "0000") {
                    this_.mutexProductList = res.data.goodsInfoList;
                    this_.mutexProductTotal = Number(res.data.total);
                    res.data.skuTotal = res.data.skuTotal == null ? 0 : res.data.skuTotal;
                    if(res.data.skuTotal>9999){
                        this.mutexProductLabel = "互斥商品（9999+）";
                    }else{
                        this.mutexProductLabel = "互斥商品（"+res.data.skuTotal+"）";
                    }
                }
            });
        },
        /**
         * 每页条数改变触发
         */
        handleSizeChangeMutexProductList(val){
            this.mutexProductForm.limit = val;
            this.mutexProductForm.start = 1;
            this.getMutexProductList();
        },
        /**
         * 换页刷新
         */
        handleCurrentChangeMutexProductList(val){
            this.merchantProductSearchForm.start = val;
            this.getMutexProductList();
        },
       /**
         * 互斥商品查看详情
         */
        getMutexInfo(row){
            let that = this;
            this.mutexPromotionForm.start = 1;
            this.mutexPromotionForm.limit = 10;
            this.mutexPromotionForm.promotionId = this.promotionId;
            this.mutexPromotionForm.promotionMerchantProductId = row.id;
            this.getPromotionMutexListByProductId();
        },
        getPromotionMutexListByProductId(){
            let that = this;
            this.utils.request.queryRedMutexDetailPromotionList(this.mutexPromotionForm,res=>{
                if(res.code=='0000'){
                    that.mutexPromotionList = res.data.rows;
                    that.mutexPromotionListTotal =  Number(res.data.total);
                    that.mutexPromotionVisible = true;
                }
            });
        },
        /**
         * 互斥商品重新添加
         */
        renewAdd(row){
        let that = this;
        let param = {};
        var productIdList = [];
        param.promotionId = this.promotionId;
        if(row.spuId == '0'){
            row.children.forEach(item=>{
                productIdList.push({"id":item.id,"goodsId": item.goodsId});
            })
        }else{
            productIdList.push({"id":row.id,"goodsId": row.goodsId});
        }
        param.goodsInfoList = productIdList;
        this.utils.request.rendRedAdd(param,res=>{
            if(res.code=='0000'){
            that.getMutexProductList();
            that.findProductPage();

            let data = res.data;
            if(data.businessCode == '0001'){
                this.$message({message: data.businessMsg, type: "success"});
            }else if(data.businessCode == '0002'){
                this.$message({message:data.businessMsg, type: "error"})
            }else if(data.businessCode == '0003'){
                this.$alert(data.businessMsg, '提示', {
                confirmButtonText: '知道了',
                callback: action => {}
                });
            }
            }
        });
        },
        /**
         * 每页条数改变触发
         */
        mutexPromotionListSizeChange(val){

        this.mutexPromotionForm.limit = val;
        this.mutexPromotionForm.start = 1;
        this.getPromotionMutexListByProductId();
        },
        /**
         * 换页刷新
         */
        mutexPromotionListCurrentChange(val){

        this.mutexPromotionForm.start = val;
        this.getPromotionMutexListByProductId();
        },
        /**
         * 点击活动名称跳转详情
         */
        linkInfoByMutexProduct(promotionId){
            this.$router.push(`RedEnvelopeDetail?promotionId=${promotionId}`);
        },
        //保存模板弹框取消
        cancel(){
            this.templateDialogFormVisible=false;
            this.$refs.templateForm.resetFields();//关闭弹框清空表单值与校验
        }
    },
    created(){
        this.getMutexProductList();
         if(this.deptType == 0){
            this.utils.request.queryChildList({},res=>{
                if(res.code == '0000' && res.data && res.data.length > 0){
                    res.data.forEach(item=>{
                        this.channelList.push(item);
                    })
                }
            })
        }
    },
    mounted(){
        this.findInfo();

    }
}
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
.ml32{
    margin-left: 32px !important;
}
.ml64{
    margin-left: 64px !important;
}
.w80{
  width:80px
}
.pdl30{
padding-left: 30px;
}
.lh25{
  line-height: 25px;
}
.pdl60{
  padding-left: 60px;
}
.pdl33{
  padding-left: 33px;
}
.w144{
  width: 144px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.width120{
  width: 150px;
}
.mr10{
  margin-right: 10px;
}
.mb10{
  margin-bottom: 10px;
}
.ml33{
  margin-left: 33px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
.pdl32{
    padding-left: 32px;
}
</style>
